<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                    },
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="welcome-simple.html" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                    <i class="fa fa-rocket text-white text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-primary">创新科技</h1>
            </a>
            <nav class="hidden md:flex items-center space-x-6">
                <a href="welcome-simple.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="company-info-simplified.html" class="text-gray-600 hover:text-primary transition-colors">关于</a>
                <a href="company-info-simplified.html#products" class="text-gray-600 hover:text-primary transition-colors">产品</a>
            </nav>
            <button class="md:hidden text-gray-600" id="menuToggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <div class="max-w-2xl mx-auto">
            <h1 class="text-3xl font-bold text-center mb-8">联系我们</h1>
            
            <div class="bg-white rounded-xl shadow-sm p-6">
                <div class="space-y-6">
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                            <i class="fa fa-map-marker text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium mb-1">地址</h3>
			    <p class="text-gray-600">轻工学院7号楼</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                            <i class="fa fa-phone text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium mb-1">电话</h3>
                            <p class="text-gray-600">宋育龙</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                            <i class="fa fa-envelope text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium mb-1">邮箱</h3>
                            <p class="text-gray-600">contact@123.com</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                            <i class="fa fa-clock-o text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium mb-1">工作时间</h3>
                            <p class="text-gray-600">周一至周五: 9:00 - 18:00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto px-4 text-center">
            <div class="flex justify-center space-x-6 mb-4">
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-weixin text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-weibo text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-linkedin text-xl"></i>
                </a>
                <a href="mailto:contact@example.com" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-envelope text-xl"></i>
                </a>
            </div>
            <p class="text-gray-400 text-sm">
                &copy; 2025 创新科技. 保留所有权利.
            </p>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menuToggle');
        const mobileMenu = document.querySelector('nav');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
    </script>
</body>
</html>
    
